<template>
  <el-card>
    <!-- 弹窗 @close="colse"-->
    <el-dialog

      title="添加分类"
      :visible="dialogShow"
      width="70%"
      @close="colse"
    >
      <el-form ref="tabelForm" :rules="rules" :model="tabelForm" label-width="120px">
        <el-form-item prop="title" label="标题">
          <el-input v-model="tabelForm.title" />
        </el-form-item>
        <el-form-item prop="desc" label="介绍">
          <el-input v-model="tabelForm.desc" />
        </el-form-item>
        <el-form-item label="封面">
          <ImgUpload ref="image" />
          <el-input style="margin-top:20px" placeholder="跳过图片强制上传" />
        </el-form-item>
        <el-form-item>
          <el-button size="small" @click="colse">取消</el-button>
          <el-button size="small" type="primary" @click="addCategory">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <PageTools>
      <template v-slot:before>
        <el-button v-if="checkPerm('addcategories')" type="primary" size="small" @click="addClass">添加分类</el-button>
      </template>

      <template v-slot:after>
        <el-input v-model="input" placeholder="请输入关键字" />
        <el-button @click="screenAgent">筛选</el-button>
      </template>
    </PageTools>
    <!-- 表单 -->
    <el-table
      :data="tableData"
      stripe
      style="width: 100%"
      border
    >
      <el-table-column
        prop="image"
        label="图片"
        width="180"
      >
        <template v-slot="{row}">
          <el-image :src="row.image" size="100px" />
        </template>
      </el-table-column>
      <el-table-column
        prop="title"
        label="标题"
        width="180"
      />
      <el-table-column
        prop="desc"
        label="介绍"
      />
      <el-table-column
        prop="address"
        label="操作"
        width="145"
      >
        <template v-slot="{row}">

          <el-button v-if="checkPerm('editcategories')" size="small" type="primary" @click="echoCategory(row.id)">编辑</el-button>
          <el-button v-if="checkPerm('delcategories')" size="small" type="danger" @click="delCategory(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-row
      type="flex"
      justify="center"
    >
      <!-- <page-separate
        ref="pageSeparate"
        @changeStart="changeStart"
      /> -->
      <el-pagination
        layout="prev, pager, next"
        :current-page.sync="start"
        :page-size="size"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </el-row>
  </el-card>
</template>

<script>
import { getCategory, addCategory, echoCategory, editCategory, delCategory, screenAgent, pageCount } from '@/api/category.js'

export default {
  data() {
    return {
      input: '',
      tableData: [],
      dialogShow: false,
      tabelForm: { image: '', title: '', desc: '' },
      rules: { title: [{ required: true, message: '标题不能为空', trigger: 'blur' }, { min: 2, max: 30, message: '请输入标题', trigger: 'blur' }],
        desc: [{ required: true, message: '介绍不能为空', trigger: 'blur' }, { min: 2, max: 30, message: '请输入介绍', trigger: 'blur' }] },
      editId: '',
      limit: 2,
      start: 1,
      total: 0,
      page: 1,
      size: 4

    }
  },
  created() {
    this.getCategory()
    this.pageCount()
  },
  // mounted() {

  // },
  methods: {
    // // 分页
    handleCurrentChange(val) {
      // console.log(val)
      this.page = val
      this.getCategory()
    },
    // 总条数
    async pageCount() {
      const res = await pageCount()
      this.total = res.data
    },
    // 筛选
    async screenAgent() {
      const res = await screenAgent(this.input)
      this.tableData = res.data
    },
    // 删除
    delCategory(id) {
      this.$confirm('确认删除吗?', {
        type: 'warning'
      }).then(async() => {
        await delCategory(id)
        this.$message({
          type: 'success',
          message: '已删除'
        })
        const { data } = await pageCount()
        // this.pageCount()
        this.total = data
        // this.page = this.page / this.size + 1
        if (data % 4 === 0 && this.page !== 0) {
          this.page = this.page - 1
          this.getCategory()
          this.pageCount()
        }

        this.getCategory()
        this.pageCount()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消' })
      })
    },
    // 封装获取数据列表函数
    async getCategory() {
      // 获取开始下标
      // this.start = (this.start - 1) * this.limit
      const res = await getCategory(
        { _limit: this.size,
          _start: (this.page - 1) * this.size })
      this.tableData = res.data
      // this.pageCount()
    },
    // 确定添加 / 编辑 分类
    async addCategory() {
      // 表单校验
      await this.$refs.tabelForm.validate()
      if (this.editId) {
        // this.$refs.image.fileList = [{ url: '' }]
        console.log(this.$refs.image.fileList)
        this.tabelForm.image = this.$refs.image.fileList[0].url

        await editCategory(this.tabelForm)
      } else {
        this.tabelForm.image = this.$refs.image.fileList[0].url

        await addCategory(this.tabelForm)
      }

      this.colse()
    },
    // 编辑回显弹窗
    async echoCategory(id) {
      this.dialogShow = true
      this.editId = id
      console.log(id)

      const res = await echoCategory(id)
      // const rules = this.$refs.image
      // console.log(res)
      this.$refs.image.percentage = 100
      // 编辑回显 需要重新给弹窗赋值
      this.$refs.image.fileList = [{ url: res.data.image }]
      this.tabelForm = res.data
    },
    // 添加弹窗
    addClass() {
      this.dialogShow = true
    },
    // 关闭弹窗
    colse() {
      this.dialogShow = false
      this.tabelForm = { image: '', title: '', desc: '' }
      this.$refs.tabelForm.resetFields()
      this.$refs.image.fileList = []
      this.getCategory()
      this.pageCount()
    }
  }
}
</script>

<style>

</style>
